<template>
    <div>
        <Header @refresh="refresh"></Header>

        <div class="nav" :class="{'small': is_collapse}">
            <div class="nav_time">
                <span>{{ nav_time }}</span>
                <i 
                class="indent_icon"
                :class="is_collapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
                @click="collapseNav"
                ></i>
            </div>
            <!-- 四级导航 -->
            <el-menu
            :default-openeds="default_openeds"
            :default-active="$route.path"
            router
            unique-opened
            @select="changeNavMenu"
            :collapse="is_collapse"
            :collapse-transition="false"
            >
                <el-submenu
                v-for="(item, index) in nav_data"
                :key="index"
                :index="item.index"
                >
                    <template slot="title">
                        <i
                        :class="item.icon"
                        v-if="item.icon != ''"
                        ></i>
                        <span>{{ item.title }}</span>
                    </template>
                    <template
                    v-for="(list, list_index) in item.list"
                    >
                        <el-menu-item 
                        :key="list_index"
                        :index="list.index"
                        v-if="list.list.length == 0"
                        >
                        {{ list.title }}
                        </el-menu-item>
                        <el-submenu
                        :key="list_index"
                        v-if="list.list.length > 0"
                        :index="list.index"
                        >
                            <template slot="title">
                                <i
                                :class="list.icon"
                                v-if="list.icon != ''"
                                ></i>
                                <span>{{ list.title }}</span>
                            </template>
                            <template
                            v-for="(list2, list_index2) in list.list"
                            >
                                <el-menu-item 
                                :key="list_index2"
                                :index="list2.index"
                                v-if="list2.list.length == 0"
                                >
                                {{ list2.title }}
                                </el-menu-item>
                                <el-submenu
                                :key="list_index2"
                                v-if="list2.list.length > 0"
                                :index="list2.index"
                                >
                                    <template slot="title">
                                        <i
                                        :class="list2.icon"
                                        v-if="list2.icon != ''"
                                        ></i>
                                        <span>{{ list2.title }}</span>
                                    </template>
                                    <template
                                    v-for="(list3, list_index3) in list2.list"
                                    >
                                        <el-menu-item 
                                        :key="list_index3"
                                        :index="list3.index"
                                        v-if="list3.list.length == 0"
                                        >
                                        {{ list3.title }}
                                        </el-menu-item>
                                    </template>
                                </el-submenu>
                            </template>
                        </el-submenu>
                    </template>
                </el-submenu>

                <!-- <el-submenu index="1">
                    <template slot="title">
                        <i class="el-icon-s-home"></i>
                        <span>房源</span>
                    </template>
                    <el-menu-item index="/page1">各区楼盘</el-menu-item>

                    <el-submenu index="1-2">
                        <template slot="title">
                            <span>个人</span>
                        </template>
                        <el-menu-item index="/page4">我成功的激活盘</el-menu-item>
                    </el-submenu>
                </el-submenu>

                <el-submenu index="2">
                    <template slot="title">
                        <i class="el-icon-user-solid"></i>
                        <span>客户</span>
                    </template>
                    <el-menu-item index="/page2">待办事项</el-menu-item>
                    <el-menu-item index="/page3">客户统计</el-menu-item>
                </el-submenu> -->
            </el-menu>
        </div>

        <div class="page_tabs" :class="{'small': is_collapse}">
            <ul>
                <li 
                v-for="(item, index) in nav_tabs" 
                :key="index"
                :class="[
                    $route.path == item.path ? 'active' : '',
                    item.path != '/home' ? 'other_nav_tabs' : ''
                ]"
                >
                    <router-link :to="item.path">{{ item.title }}</router-link>
                    <i 
                    class="el-icon-close" 
                    @click="closeTabs(index)"
                    v-if="item.path != '/home'"
                    ></i>
                </li>
            </ul>
        </div>

        <div class="main" :class="{'small': is_collapse}">
            <keep-alive>
                <router-view v-if="$route.meta.keepAlive" ref="router_view"></router-view>
            </keep-alive>
            <router-view v-if="!$route.meta.keepAlive" ref="router_view"></router-view>
        </div>
    </div>
</template>

<script>
import Header from '@/components/Header'

export default {
    name: 'Home',
    components: {
        Header
    },
    data() {
        return {
            nav_time: this.$moment().format('YYYY/MM/DD'),
            is_collapse: false,   //默认是展开导航
            default_openeds: ['1'],  //默认展开index=1导航菜单
            nav_data: [ //导航数据
                {
                    index: '1',
                    title: '房源',
                    icon: 'el-icon-s-home',
                    list: [
                        {
                            index: '/page1',
                            title: '各区楼盘',
                            icon: '',
                            list: []
                        },
                        {
                            index: '1-2',
                            title: '个人',
                            icon: '',
                            list: [
                                {
                                    index: '/page2',
                                    title: '我成功的激活盘',
                                    icon: '',
                                    list: []
                                },
                                {
                                    index: '1-2-2',
                                    title: '房源举报申请',
                                    icon: '',
                                    list: [
                                        {
                                            index: '/page5',
                                            title: '我的申请',
                                            icon: '',
                                            list: []
                                        },
                                        {
                                            index: '/page6',
                                            title: '我的审批',
                                            icon: '',
                                            list: []
                                        },
                                        {
                                            index: '/page7',
                                            title: '我办理过',
                                            icon: '',
                                            list: []
                                        }
                                    ]
                                }
                            ]
                        },
                    ]
                },
                {
                    index: '2',
                    title: '客户',
                    icon: 'el-icon-user-solid',
                    list: [
                        {
                            index: '/page3',
                            title: '待办事项',
                            icon: '',
                            list: []
                        },
                        {
                            index: '/page4',
                            title: '客户统计',
                            icon: '',
                            list: []
                        },
                    ]
                }    
            ],

            //tabs导航标签数据
            nav_tabs: [
                {
                    path: '/home',
                    title: '首页'
                }
            ]
        }
    },
    mounted() {
        this.initNavTabs()
    },
    methods: {
        //导航切换
        changeNavMenu(path, pathArr, vueCom) {
            console.log(path)
            console.log(vueCom.$el.innerText)

            let pushBool = true
            this.nav_tabs.forEach((item) => {
                if(item.path == path){
                    pushBool = false    //有相同的不追加
                }
            })
            if(pushBool){//如果没有找到相同的导航则追加
                this.nav_tabs.push({
                    path: path,
                    title: vueCom.$el.innerText
                })
                sessionStorage.setItem('nav_tabs', JSON.stringify(this.nav_tabs))   //设置本地存储
            }
        },
        //初始化
        initNavTabs() {
            if(sessionStorage.getItem('nav_tabs')){
                this.nav_tabs = JSON.parse(sessionStorage.getItem('nav_tabs'))
            }else{
                this.$router.push('/home')
            }
        },
        //关闭tabs导航标签
        closeTabs(index) {
            this.nav_tabs.forEach((item, itemIndex) => {
                if(index == itemIndex && this.$route.path == item.path){//判断关闭选中标签
                    let prevPath = this.nav_tabs[itemIndex - 1].path
                    this.$router.push(prevPath) //路由跳转前一个标签页面
                }
            })
            this.nav_tabs.splice(index, 1)  //删除
            sessionStorage.setItem('nav_tabs', JSON.stringify(this.nav_tabs))   //设置本地存储
        },
        //缩放导航
        collapseNav() {
            this.is_collapse = !this.is_collapse
        },
        //刷新内容
        refresh() {
            let children_view = this.$refs['router_view']
            if(children_view.refreshPage){//子集存在刷新方法 则执行
                children_view.refreshPage()
            }else{//否则刷新整个页面
                this.$router.go(0)
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.nav{
    position: absolute;
    left: 0;
    top: 35px;
    width: 190px;
    bottom: 0;

    .nav_time{
        text-align: center;
        height: 25px;
        line-height: 25px;
        position: relative;
        background-color: #F9F9F9;
        box-shadow: 0px 0px 3px 0px rgb(202, 202, 202);
        font-size: 12px;

        .indent_icon{
            position: absolute;
            right: 10px;
            font-size: 18px;
            top: 3px;
            cursor: pointer;
        }
    }

    .el-menu{
        height: calc(100% - 25px);
        overflow-x: hidden;
        overflow-y: auto;
    }

    ::v-deep{
        .el-menu-item, .el-submenu__title{
            height: 35px;
            line-height: 35px;
        }

        .el-menu-item:focus, .el-menu-item:hover{
            background-color: #F7AB00;
        }
        .el-submenu__title:hover{
            background-color: transparent;
        }
        .el-submenu .el-menu-item{
            min-width: 100%;
        }
        .el-menu-item.is-active{
            background-color: #F7AB00;
            color: #000;
        }
    }
    
}

::v-deep .el-submenu__title, .el-menu-item{
    height: 35px;
    line-height: 35px;
}

.page_tabs{
    position: absolute;
    top: 35px;
    left: 190px;
    right: 0;
    height: 24px;
    border-bottom: 1px solid #e6e6e6;    
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1);
    z-index: 2;

    ul{
        li{
            text-align: center;
            float: left;
            border-right: 1px solid #e6e6e6;
            cursor: pointer;
            transition: all .2s;

            &:hover, &.active{
                background-color: #e6e6e6;
            }

            &.other_nav_tabs{
                position: relative;
                padding-right: 16px;
            }
            
            a{
                padding: 0 15px;
                height: 24px;
                line-height: 24px;
                display: block;
            }

            i{
                position: absolute;
                right: 8px;
                color: #a6a6a6;
                font-size: 12px;
                top: 7px;

                &:hover{
                    color: #000;
                }
            }
        }
    }
}

.main{
    position: absolute;
    top: 60px;
    left: 190px;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #F2F2F2;
}

// 导航缩小样式
.nav.small{
    width: 65px;
    transition: all .2s;

    .nav_time {
        span{
            display: none;
        }
        
        i{
            right: 23px;
        }
    }
}

.page_tabs.small,.main.small{
    left: 65px;
    transition: all .2s;
}
</style>